<template>
  <div class="page">
    <QueryForm
      @getData="getData"
      v-model:queryData="queryData"
      :fields="fields"
    >
      <template v-slot:username="{ item }">
        <el-input v-model="item.username" />
      </template>
    </QueryForm>
    <div class="container">
      <div class="mb-8">
        <el-button type="primary" @click="showForm('add')">新增</el-button>
      </div>
      <BaseTable
        border
        :columns="columns"
        :source="table.list"
        :isMutiple="true"
        :total="table.total"
        @paginationChange="handlePaginationChange"
        :pageNum="table.pageNum"
        :pageSize="table.pageSize"
        v-model:multipleSelection="table.multipleSelection"
      >
        <template v-slot:created_at="scope">
          <div>{{ parseTime(scope.row.created_at) }}</div>
        </template>
        <template v-slot:updated_at="scope">
          <div>{{ parseTime(scope.row.updated_at) }}</div>
        </template>

        <template v-slot:action="scope">
          <el-button
            size="mini"
            @click="showForm('edit', scope.row)"
            type="primary"
            >编辑</el-button
          >
          <el-button
size="mini"
type="danger"
@click="deleteItems(scope.row)"
            >删除</el-button
          >
        </template>
      </BaseTable>
    </div>

    <UserForm
      @refresh="getData"
      v-model:visible="visible"
      :title="formTitle"
      :data="formData"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, readonly, ref } from 'vue'
import QueryForm from '@/components/form/query/index.vue'
import BaseTable from '@/components/table/index.vue'
import UserForm from './from.vue'
import useTable from '@/use/useTable'
import { getUserList, userDelete } from '@/api/user'
import { parseTime } from '@/utils'
export default defineComponent({
  name: 'User',
  components: {
    QueryForm,
    BaseTable,
    UserForm,
  },
  setup () {
    const fields = readonly([
      {
        label: '用户姓名',
        value: 'username',
        slot: true,
      },
    ])
    const queryData = ref({
      username: '',
    })
    const columns = readonly([
      {
        value: 'id',
        label: '编号',
      },
      {
        value: 'username',
        label: '账号',
      },
      {
        value: 'roles',
        label: '角色',
      },
      {
        value: 'created_at',
        label: '创建时间',
        slot: 'created_at',
      },
      {
        value: 'updated_at',
        label: '更新时间',
        slot: 'updated_at',
      },
      {
        value: 'action',
        label: '操作',
        slot: true,
      },
    ])
    const visible = ref(false) // 编辑表单显示
    const formData = ref({}) // 表单数据
    const formType = ref('')

    const formTitle = computed(() => {
      return formType.value === 'add' ? '新增用户' : '编辑用户'
    })

    function handlePaginationChange (data) {
      table.value.params = { ...table.value.params, ...data }
      getData()
    }
    function getData () {
      getList(getUserList, { ...queryData.value, ...table.value.params })
    }

    function showForm (type: string, data) {
      console.log('table', type, data)
      formType.value = type
      if (type === 'add') {
        formData.value = {}
      } else {
        formData.value = { ...data }
      }
      visible.value = true
    }

    const { table, getList, handleDelete } = useTable()

    async function deleteItems (row) {
      await handleDelete(userDelete, [row.id])
      getData()
    }

    onMounted(() => {
      getData()
    })

    return {
      fields,
      queryData,
      columns,
      table,
      visible,
      formData,
      formTitle,
      deleteItems,
      getData,
      handlePaginationChange,
      showForm,
      parseTime,
    }
  },
})
</script>

  <style lang='less' scoped>
</style>
